<template>
<div>
  <span v-if='flag'>
    <div  ref="sChart" style="height: 300px"></div>
  </span>
  <a-empty v-else style='height:300px'></a-empty>
</div>

</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    lineData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    selectedStatus: { 
      type: Object,
      default: () => {
        return {}
      }
    },
    curNum:{
      type:Number,
      default:1
    }    
  },
  data() {
    return {
      pieLegend: null,
      xAxisData: null,
      seriesData: null,
      legendData: null,
      flag:false
    }
  },
  created() {

  },
  watch: {
    lineData: function (newData) {
  
      if (newData) {
        if(Object.keys(newData).length==0) return this.flag = false
        this.flag = true

        this.$nextTick(() => {
          this.xAxisData = newData['时间,ms']
          // console.log('this.xAxisData>>>',this.xAxisData)
          this.seriesData = []
          this.legendData=[]

          let res = Object.entries(newData).filter(([key])=>key!=='时间,ms'&&key.indexOf('线'+this.curNum+',')>-1)
          // console.log(res)
          if(!res.length) {
            res = Object.entries(newData).filter(([key])=>key!=='时间,ms'&&key.indexOf(1)>-1)
            this.$emit('resetCurNum')
          }
          let newRes = []
          for(let i = 0;i<res.length;i++){
            if(res[i][0].includes('速度')){
              newRes[0]=res[i]
            }else if(res[i][0].includes('位移')){
              newRes[1]=res[i]
            } else {
              newRes[2]=res[i]
            }
          }          
          const objRes = Object.fromEntries(newRes)
          console.log('objRes>>>',objRes)
          

          this.legendData = Object.keys(objRes)


          for (let key in objRes) {
            this.seriesData.push({
              name: key,
              type: 'line',
              smooth:true,
              data: objRes[key],
              lineStyle:{
                color:key.indexOf('速度曲线')> -1 ?'#5470c6':key.indexOf('位移曲线')> -1?'#91cc75':'#fac858',
              },
              itemStyle : {
                normal : {
                      color:key.indexOf('速度曲线')> -1 ?'#5470c6':key.indexOf('位移曲线')> -1?'#91cc75':'#fac858',
                  }
              }

            })
          }

          console.log("seriesData==>", this.seriesData)

          this.getLine()
        });
      } else {
        this.flag = false
      }
    },
  },
  mounted() {
    // this.getLine()
  },
  methods: {
    // 折线图
    getLine() {
      let that =this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.sChart);

      // 绘制图表，this.echarts1_option是数据
      let option = {
        // title:{
        //   text:'图形报表',
        // },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
                var str = '';
                // console.log(params)
                params.forEach(item=>{
                str +=`${item.marker} ${(item.seriesName).split(',')[0]}：${(item.value)} ${(item.seriesName).split(',')[1]} </br>`
                })
                return `
                  时间：${params[0].name} ms</br>
                  ${str}
                `
          }          
        },
        legend: {
          // y: 'top',
          bottom:'0',
          x: 'center',
          data:this.legendData,
          selected:this.selectedStatus,
          formatter: function (params) {
            // console.log('legend>>>>>>',params)
            return params.split(',')[0];
          }
        },
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true,
        //     start: 70,
        //     end: 100,
        //     xAxisIndex: [0],
        //   }
        // ],        
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData,
          axisLabel:{
            show:true,
            rotate:0,
            showMaxLabel: true,
            formatter:(_,index)=>{
              if(index==0){
                return 0
              } else if(index == this.xAxisData.length-1){
                return this.xAxisData[index]
              }
            }
          }
        },
        grid: {
          left: '2%',
          right: '3%',
          bottom: '10%',
          top:'5%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          splitNumber:5,
          min:0
        },
        series: this.seriesData       
      };
      myChart.on('legendselectchanged',(val)=>{
        // console.log('legend>>>>',val.selected)
        that.$emit('getLegendStatus',val.selected)
      })
      myChart.setOption(option, true);
    }

    // 使用刚指定的配置项和数据显示图表。
    // },
  }
}
</script>